<template>
	<view>
	<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-orange"  title="组件"></cu-custom>
	
		<scroll-view scroll-y class="page">
			<view class="margin-top"></view>
			<view class="nav-list">
				<navigator hover-class='none' :url="'/pages/demo/component/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
				 :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
					<view class="nav-title">{{item.title}}</view>
					<view class="nav-name">{{item.name}}</view>
					<text class="basefont" :class="item.baseIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		onShow() {
			this.headerKey += 1;
		},
		data() {
			return {
				headerKey:0,
				hackReset:true,
				elements: [{
						title: '输入框',
						name: 'InputDemo',
						color: 'purple',
						baseIcon: 'icon-heart'
					},{
						title: '选择器',
						name: 'SelectDemo',
						color: 'blue',
						baseIcon: 'icon-heart'
					},{
						title: '表单',
						name: 'FormDemo',
						color: 'blue',
						baseIcon: 'icon-heart'
					},]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
</style>
